<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>打卡记录</title>
    <style>
        #app{
            background-color: #d0d5d8;
        }
    </style>
</head>
<body>
<div id="app">
    <h3>{{results.today}}:{{msg}}</h3>
    <label>总打卡:{{results.cardInfo.totalCount}}</label><br>
    <label>连续打卡:{{results.cardInfo.successionCount}}</label><br>
    <label>积分:{{results.cardInfo.point}}</label><br>
    <h3>打卡记录：</h3>
    <div v-for="document in results.documents">
        <hr>
        <label>{{document.createTime}}</label>
        <p>{{document.todayLog}}</p>
    </div>
    <hr>

</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            results:{},
            msg:""
        },
        mounted:function (e) {
            let that=this
            $.ajax({
                url:"/card/document_data",
                type:"GET",
                success:function (result) {
                    that.results=result.data
                    that.msg=result.msg
                }
            })
        }
    })
</script>
</body>
</html>